<template>
  <JVxeReloadEffect
      :vNode="innerValue"
      :effect="isEffect"
      @effectEnd="handleEffectEnd"
  />
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import JVxeReloadEffect from '../JVxeReloadEffect'
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types'
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks'
import { watch } from 'vue'

export default defineComponent({
  name: 'JVxeNormalCell',
  components: { JVxeReloadEffect },
  props: useJVxeCompProps(),
  setup(props: JVxeComponent.Props) {
    const setup = useJVxeComponent(props)
    const { innerValue, row } = setup

    const reloadEffect = props.renderOptions.reloadEffect
    const isEffect = ref<boolean>(false)

    watch(innerValue, () => {
      if (reloadEffect.enabled) {
        if (reloadEffect.isEffect(row.value.id)) {
          isEffect.value = true
        }
      }
    }, { immediate: true })

    // 特效结束
    function handleEffectEnd() {
      isEffect.value = false
      reloadEffect.removeEffect(row.value.id)
    }

    return {
      innerValue,
      isEffect,
      handleEffectEnd,
    }
  },
  enhanced: {
    switches: { editRender: false },
  } as JVxeComponent.EnhancedPartial,
})
</script>

<style scoped>

</style>